import React from 'react';
import { Modal, Form, Input, Select, DatePicker, Button, Row, Col, Divider } from 'antd';
import './AddPatientModal.css'; // 复用样式

const { Option } = Select;
const { TextArea } = Input;

const EditPatientModal = ({ 
  visible, 
  onCancel, 
  onOk, 
  patientData, 
  onFieldChange,
  form 
}) => {
  return (
    <Modal
      title="修改患者信息"
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
      width={1000}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={onOk}>
          保存
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        {/* 基础信息区域 - 只读 */}
        <h4 style={{ fontWeight: 'bold', marginBottom: 16 }}>基本信息</h4>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item label="姓名">
              <Input value={patientData.name} readOnly />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="年龄">
              <Input value={patientData.age} readOnly />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="性别">
              <Input value={patientData.gender} readOnly />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="手机号">
              <Input value={patientData.phone} readOnly />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={12}>
          <Col span={12}>
            <Form.Item label="就诊日期">
              <DatePicker 
                style={{ width: '100%' }}
                value={patientData.date} 
                readOnly
              />
            </Form.Item>
          </Col>
        </Row>

        {/* 可编辑的诊断信息 */}
        <Divider orientation="left" className="divider-button">
          诊断信息
        </Divider>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="主要诊断"
              name="diagnosis.main"
              rules={[{ required: true, message: '请输入主要诊断' }]}
            >
              <Input 
                value={patientData.diagnosis?.main}
                onChange={(e) => onFieldChange('diagnosis.main', e.target.value)}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="严重程度"
              name="diagnosis.severity"
              rules={[{ required: true, message: '请选择严重程度' }]}
            >
              <Select
                value={patientData.diagnosis?.severity}
                onChange={(value) => onFieldChange('diagnosis.severity', value)}
              >
                <Option value="轻度">轻度</Option>
                <Option value="中度">中度</Option>
                <Option value="重度">重度</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        {/* 其他可编辑字段保持不变 */}
        <Form.Item
          label="次要诊断"
          name="diagnosis.secondary"
        >
          <Input 
            value={patientData.diagnosis?.secondary}
            onChange={(e) => onFieldChange('diagnosis.secondary', e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="诊断描述"
          name="diagnosis.description"
        >
          <TextArea 
            rows={3}
            value={patientData.diagnosis?.description}
            onChange={(e) => onFieldChange('diagnosis.description', e.target.value)}
          />
        </Form.Item>

        <Divider orientation="left" className="divider-button">
          病史信息
        </Divider>
        <Form.Item
          label="既往病史"
          name="medicalHistory"
        >
          <TextArea 
            rows={3}
            value={patientData.medicalHistory}
            onChange={(e) => onFieldChange('medicalHistory', e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="过敏史"
          name="allergyHistory"
        >
          <TextArea 
            rows={2}
            value={patientData.allergyHistory}
            onChange={(e) => onFieldChange('allergyHistory', e.target.value)}
          />
        </Form.Item>

        <Divider orientation="left" className="divider-button">
          检查与治疗
        </Divider>
        <Form.Item
          label="检查项目"
          name="examination"
        >
          <Select
            mode="tags"
            value={patientData.examination}
            onChange={(value) => onFieldChange('examination', value)}
            placeholder="请添加检查项目"
          />
        </Form.Item>

        <Form.Item
          label="治疗方案"
          name="treatment"
        >
          <Select
            mode="tags"
            value={patientData.treatment}
            onChange={(value) => onFieldChange('treatment', value)}
            placeholder="请添加治疗方案"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditPatientModal;